<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="icon" type="shortcut icon" th:href="@{/img/favicon.ico}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/global.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/video-publish.css}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

  <link rel="stylesheet" type="text/css" th:href="@{/editor-md/examples/css/style.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/editor-md/css/editormd.css}" />
  <style>
    .table tbody tr td{
      vertical-align: middle;
    }
    .btn-group button{
      background: #FFFFFF00;
      border: 1px solid #ff0909;
    }
  </style>

  <title>管理员界面 - 用户管理</title>

</head>
<body>

<!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="/index"><i class="bi bi-house-door" style="color: #FFFFFF"></i></a>
    <a class="navbar-brand" href="#">管理员界面-用户管理</a>
    <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
      <li class="nav-item col-6 col-lg-auto">
      </li>
    </ul>
  </nav>

  <!-- Main Content -->
<div class="container">
<!--  搜索栏-->
  <form id="searchForm">
    <div class="row">
      <div class="col-md-3 form-group">
        <label for="username">账户名:</label>
        <input type="text" class="form-control" name="username" id="username" placeholder="账户名(支持模糊搜索)...">
      </div>
      <div class="col-md-3 form-group">
        <label for="schoolName">学校:</label>
        <input type="text" class="form-control" name="schoolName" id="schoolName" placeholder="学校名称(支持模糊搜索)...">
      </div>
      <div class="col-md-4 form-group">
        <label for="email">邮箱:</label>
        <input type="text" class="form-control" name="email" id="email" placeholder="邮箱(支持模糊搜索)...">
      </div>
      <div class="col-md-2 form-group">
        <label for="status">状态:</label>
        <select id="status" name="status" class="form-control">
          <option value="999">全选</option>
          <option value="1">正常</option>
          <option value="0">未激活</option>
          <option value="2">封禁</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 form-group">
        <label for="startTime">开始时间:</label>
        <input type="datetime-local" class="form-control" name="startTime" id="startTime" placeholder="起始时间...">
      </div>
      <div class="col-md-6 form-group">
        <label for="endTime">截止时间:</label>
        <input type="datetime-local" class="form-control" name="endTime" id="endTime" placeholder="结束时间...">
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-12 text-right">
        <button type="button" class="btn btn-secondary mt-3" onclick="clearSearch()">清除</button>
        <button type="submit" class="btn btn-primary mt-3 ml-3">搜索</button>
      </div>
    </div>
  </form>
  <hr class="my-3">
  <div class="table-responsive mt-4">
    <table class="table table-striped table-hover" id="dataContent" th:fragment="dataContent">
      <thead class="thead-dark">
      <tr class="vertical-align">
        <th>头像</th>
        <th>用户名</th>
        <th>账号</th>
        <th>学校</th>
        <th>邮箱</th>
        <th>类型</th>
        <th>状态</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr th:each="user:${users}" class="vertical-align">
        <td><a th:href="@{|/user/profile/${user.id}|}"><img th:src="${user.headerUrl}" class="rounded-circle" style="width:30px;"/></a></td>
        <td th:text="${user.username}"></td>
        <td th:text="${user.account}"></td>
        <td th:text="${user.school.name}"></td>
        <td th:text="${user.email}"></td>
        <td th:text="${user.type == 0 ? '普通用户' : (user.type == 1 ? '管理员' : '版主')}"></td>
        <td th:text="${user.status == 0 ? '未激活' : (user.status == 1 ? '正常' : '封禁中')}"></td>
        <td th:text="${#dates.format(user.createTime, 'yyyy年MM月dd日 HH:mm:ss')}"></td>
        <td>
          <div class="btn-group" role="group" th:if="user.type != 1">
            <button id="disableBtn" type="button" class="btn btn-xs btn-outline-danger" th:if="${user.status == 1}" th:onclick="changeStatus([[${user.id}]],2)">
              封禁
            </button>
            <button id="enableBtn" type="button" class="btn btn-xs btn-outline-success" th:if="${user.status == 2}" th:onclick="changeStatus([[${user.id}]],1)">
              恢复
            </button>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

  <!-- 提示框 -->
  <div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="hintModalLabel">提示</h5>
        </div>
        <div class="modal-body" id="hintBody"></div>
      </div>
    </div>
  </div>

<script th:src="@{/js/jquery-3.1.0.min.js}"></script>
<script th:src="@{/editor-md/editormd.min.js}"></script>

<script th:src="@{/js/popper.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/global.js}"></script>

<!-- 自定义js-->
<script type="text/javascript">

  $(function () {
    $("#searchForm").submit(function (event) {
      event.preventDefault(); // 阻止表单默认提交行为

      var username = $("#username").val();
      var schoolName = $("#schoolName").val();
      var email = $("#email").val();
      var status = $("#status").val();
      var startTime = $("#startTime").val();
      var endTime = $("#endTime").val();

      $.ajax({
        url: "/user/searchUsers",
        type: "POST",
        data: {
          "username": username,
          "schoolName": schoolName,
          "email": email,
          "status": status,
          "startTime": startTime,
          "endTime": endTime
        },
        success: function (data){
          $("#dataContent").html(data);
        }
      })
    })
  })
  function changeStatus(userId, targetStatus){
    $.ajax({
      url:"/user/changeStatus",
      type: "POST",
      data:{"userId": userId ,"status": targetStatus},
      success: function (data){
        $("#dataContent").html(data);
      }
    })
  }
  function clearSearch() {
    // 获取表单元素
    var form = document.getElementById("searchForm");

    // 将文本框和下拉框的值设置为空字符串或默认值
    form.username.value = "";
    form.schoolName.value = "";
    form.email.value = "";
    form.status.value = "999";
    form.startTime.value = "";
    form.endTime.value = "";
  }

</script>
</body>
</html>
